웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
웹사이트를 구축하는 경우 엘리먼트 요소에 원하는 배경을 추가할 수 있습니다. css를 사용하여 어떻게 백그라운드 배경을 설정하는지와 예제를 함께 알아보도록 하겠습니다. 추가적으로 그라데이션 효과(Gradient)를 만드는 방법도 함께 알아봅니다.
# CSS를 사용하여 백그라운드(background) 지정하기
특정 요소에 백그라운드를 추가하는 방법으로 CSS의 background 속성을 사용합니다. 백그라운드를 지정하는 경우 이미지 또는 배경색을 선택할 수 있습니다. 배경색의 경우 그라데이션 효과도 가능합니다.
i. 백그라운드 이미지 설정
ii. 백그라운드 색을 설정
iii. 백그라운드에 그라데이션을 추가하기
그럼 어떻게 사용하는지 간단한 문법부터 알아보겠습니다.
! CSS의 background 속성 사용하기
background를 사용할때 다음과 같이 6가지 값을 설정합니다. 아래를 봐주세요.
A. 색상(color)
B. 이미지 위치 / url 주소
C. 반복(repeat) 여부
D. 첨부 // scroll default이며 fixed와 scroll에서 선택이 가능
E. 위치(position)
F. 크기(size)
하나씩 알아보면... 다음과 같습니다.
@ 색상 / background-color
배경으로사용할 백그라운드색(background color)입니다.
@ 이미지 위치 url / background-position
이미지를 사용할 경우 파일의 위치입니다.
@ 이미지 반복(repeat) 여부 / background-repeat
이미지를 사용하는 경우 배경 이미지를 채우고 남은 여백을 어떻게 처리할 것인가를 결정합니다. 이때 사용 가능 값으로 repeat, no-repeat, repeat-x, repeat-y의 값이 있습니다.
- repeat : 해당 영역 전체를 반복해서 채우기
- repeat-x : x축으로 반복하여 채우기
- repeat-y : y축으로 반복하여 채우기
- no-repeat : 남은 영역은 채우지 않기
@ 이미지 위치 / background-position
position은 배경 이미지를 사용하는 경우 해당 이미지의 위치를 결정합니다. 이때 사용 가능한 값은 0% 0%처럼 x, y값을 각각 사용합니다. 또한 0px 0px처럼 픽셀값으로 지정도 가능하며 left 또는 top처럼 영문으로도 표기가 가능합니다.
@ 이미지 배경의 크기 / background-size
배경 크기를 결정합니다. background-size는 아래의 값을 사용합니다.
cover
contain
% 또는 pixel의 값
@ 한 줄 표기하기
대게 함께 묶어서 많이 사용됩니다. 하지만 따로 사용하는것 역시 가능하며 일부 스타일 지정시 자주 쓰입니다. 아래를 봐주세요.
@ 각각 사용하는 방법
그럼 아래는 배경색 또는 이미지를 적용한 예제입니다.
@ 예제 1, 배경색 적용
@ 백그라운드 크기 설정하기
@ 방법 1
@ 브라우저 호환하기 위한 방법의 prefix 적용
! 다른 css 어트리뷰트 사용하기
그라데이션은 아래 방법으로도 가능하니 참고하세요.
위 예제는 무지개 텍스트 만들기에서 가져왔습니다.
링크 바로가기 >
https://webisfree.com/2019-06-18/css-%EB%A0%88%EC%9D%B8%EB%B3%B4%EC%9A%B0(rainbow)-%EC%83%89%EC%83%81%EC%9D%98-%ED%85%8D%EC%8A%A4%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0
# CSS를 사용하여 백그라운드(background) 지정하기
특정 요소에 백그라운드를 추가하는 방법으로 CSS의 background 속성을 사용합니다. 백그라운드를 지정하는 경우 이미지 또는 배경색을 선택할 수 있습니다. 배경색의 경우 그라데이션 효과도 가능합니다.i. 백그라운드 이미지 설정
ii. 백그라운드 색을 설정
iii. 백그라운드에 그라데이션을 추가하기
그럼 어떻게 사용하는지 간단한 문법부터 알아보겠습니다.
! CSS의 background 속성 사용하기
background를 사용할때 다음과 같이 6가지 값을 설정합니다. 아래를 봐주세요.A. 색상(color)
B. 이미지 위치 / url 주소
C. 반복(repeat) 여부
D. 첨부 // scroll default이며 fixed와 scroll에서 선택이 가능
E. 위치(position)
F. 크기(size)
하나씩 알아보면... 다음과 같습니다.
@ 색상 / background-color
배경으로사용할 백그라운드색(background color)입니다.
@ 이미지 위치 url / background-position
이미지를 사용할 경우 파일의 위치입니다.
@ 이미지 반복(repeat) 여부 / background-repeat
이미지를 사용하는 경우 배경 이미지를 채우고 남은 여백을 어떻게 처리할 것인가를 결정합니다. 이때 사용 가능 값으로 repeat, no-repeat, repeat-x, repeat-y의 값이 있습니다.
- repeat : 해당 영역 전체를 반복해서 채우기
- repeat-x : x축으로 반복하여 채우기
- repeat-y : y축으로 반복하여 채우기
- no-repeat : 남은 영역은 채우지 않기
@ 이미지 위치 / background-position
position은 배경 이미지를 사용하는 경우 해당 이미지의 위치를 결정합니다. 이때 사용 가능한 값은 0% 0%처럼 x, y값을 각각 사용합니다. 또한 0px 0px처럼 픽셀값으로 지정도 가능하며 left 또는 top처럼 영문으로도 표기가 가능합니다.
@ 이미지 배경의 크기 / background-size
배경 크기를 결정합니다. background-size는 아래의 값을 사용합니다.
cover
contain
% 또는 pixel의 값
! 속성 적용시 각각 또는 한 줄 표기 방법
background는 한 줄에 사용하는 방법도 있지만 각각의 값들을 따로 사용하는 짧은 css 속성을 가집니다. 아래처럼 말이죠...@ 한 줄 표기하기
.test {
background: black url(test.jpg) no-repeat scroll 50% 50% / cover;
}
background: black url(test.jpg) no-repeat scroll 50% 50% / cover;
}
대게 함께 묶어서 많이 사용됩니다. 하지만 따로 사용하는것 역시 가능하며 일부 스타일 지정시 자주 쓰입니다. 아래를 봐주세요.
@ 각각 사용하는 방법
.test {
background-image: url('./webisfree.jpg');
background-repeat: none;
background-color: #fff;
background-position: 100px 100px;
background-size: cover;
}
background-image: url('./webisfree.jpg');
background-repeat: none;
background-color: #fff;
background-position: 100px 100px;
background-size: cover;
}
그럼 아래는 배경색 또는 이미지를 적용한 예제입니다.
# background 예제 적용 보기
먼저 배경색을 사용한 예제입니다.@ 예제 1, 배경색 적용
.test1 {
background: red;
width: 100px;
height: 100px;
}
background: red;
width: 100px;
height: 100px;
}
! IE와의 호환성
여기서 사이즈를 결정하는 background-size 속성은 IE와 호환되지 않으므로 대체 가능한 방법을 고려해야 합니다. 또한 background-position: 100px 100px;는 background-position-x 그리고 background-position-y로 나누어 쓰기도 하는데 이 역시 구 IE에 적용되지 않으므로 함께 사용하는 background-position 속성을 써야하죠.! 백그라운드 사이즈 조절하기
배경 이미지의 사이즈를 조절하는 속성으로 background-size를 사용합니다. 이때 값으로 pixel이나 퍼센트를 사용할 수도 있고 아니면 전체 모두를 덮을 수 있는 cover값을 쓸 수 있습니다.@ 백그라운드 크기 설정하기
.test {
background-size: 120px; // 픽셀단위 지정
background-size: 100%; // 상대비율로 지정
background-size: 100% 50%; // 좌우, 상하 길이 지정 background-size: cover; // 영역(레이어)을 모두 덮음
}
background-size: 120px; // 픽셀단위 지정
background-size: 100%; // 상대비율로 지정
background-size: 100% 50%; // 좌우, 상하 길이 지정 background-size: cover; // 영역(레이어)을 모두 덮음
}
# 백그라운드에 그라데이션 효과 적용방법
이번에 알아볼 방법은 바로 그라데이션 효과의 사용입니다. 그라데이션 효과는 과거 웹호환성 문제로 css보다는 이미지가 많이 사용되었으나 최근 브라우저를 대부분 지원하는 요즘은 매우 자주 쓰입니다. 다만 오래된 IE의 경우 적용되지 않을 수 있습니다.@ 방법 1
.test {
background: linear-gradient(90deg, red 0%, orange 50%, yellow 100%);
}
background: linear-gradient(90deg, red 0%, orange 50%, yellow 100%);
}
@ 브라우저 호환하기 위한 방법의 prefix 적용
.test {
background: gradient(linear, 0% 0%, 50% 100%, from(#f60), to(#fff));
background: -o-gradient(linear, 0% 0%, 50% 100%, from(#f60), to(#fff));
background: -ms-gradient(linear, 0% 0%, 50% 100%, from(#f60), to(#fff));
background: -moz-gradient(linear, 0% 0%, 50% 100%, from(#f60), to(#fff));
background: -webkit-gradient(linear, 0% 0%, 50% 100%, from(#f60), to(#fff));
}
이처럼 prefix를 사용해야 크로스 브라우징이 가능합니다. 단, IE는 9 이하 버젼은 적용이 안됩니다.
background: gradient(linear, 0% 0%, 50% 100%, from(#f60), to(#fff));
background: -o-gradient(linear, 0% 0%, 50% 100%, from(#f60), to(#fff));
background: -ms-gradient(linear, 0% 0%, 50% 100%, from(#f60), to(#fff));
background: -moz-gradient(linear, 0% 0%, 50% 100%, from(#f60), to(#fff));
background: -webkit-gradient(linear, 0% 0%, 50% 100%, from(#f60), to(#fff));
}
! 다른 css 어트리뷰트 사용하기
그라데이션은 아래 방법으로도 가능하니 참고하세요.background-image: linear-gradient(90deg, red, orange, yellow, green, blue, navy, purple);
위 예제는 무지개 텍스트 만들기에서 가져왔습니다.
링크 바로가기 >
https://webisfree.com/2019-06-18/css-%EB%A0%88%EC%9D%B8%EB%B3%B4%EC%9A%B0(rainbow)-%EC%83%89%EC%83%81%EC%9D%98-%ED%85%8D%EC%8A%A4%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0
아래의 글도 찾고 계시지 않나요?
자바스크립트 Canvas에 백그라운드 배경을 추가하는 방법
[VueJS] 태그에 백그라운드 이미지 추가하는 방법- CSS Property background color
- css를 사용하여 gradient 텍스트 만드는 방법
- 제이쿼리 css() 에서 background-image 안되는 경우
- [CSS] padding 영역을 선택하여 색 지정하기, background-clip
[CSS] background 배경 고정하기, background-attachment
[CSS] background-blend-mode 이미지와 배경색 혼합하기
[CSS] background-position 백그라운드 위치 조정방법